<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{marign:0; padding:0;}
        span{ float:left; font-size:14px; font-weight:800; margin-top:100px;}
        .move{
            -webkit-animation-name:move; -moz-animation-name:move; -o-animation-name:move; animation-name:move;
            -webkit-animation-duration:.9s; -moz-animation-duration:.9s; -o-animation-duration:.9s; animation-duration:.9s;
            animation-fill-mode:both;
        }
        @keyframes move{
            0%{

            }
            100%{
                -webkit-transform:translateY(-100px); -moz-transform:translateY(-100px); -ms-transform:translateY(-100px); -o-transform:translateY(-100px); transform:translateY(-100px);
            }
        }
    </style>
</head>
<body>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
</body>
<script>
    var span=document.getElementsByTagName("span");
    var len=span.length;
    /*var go= function () {
        setTimeout(addCls,10000)
    }
    function addCls(){
        span[j].className+=" move"
    }
    for(var i=0;i<len;i++){
        (function (j) {
            go(j)
        })(i)
    }*/
    var i=0
    var timer=setInterval(function () {
        if(i==len){clearInterval(timer);return;}
        span[i].className+=" move";
        i++;
    },300)

</script>
</html>